<template>
  <div>
    <div class="carousel" @mouseenter="pauseAutoPlay" @mouseleave="startAutoPlay">
      <div class="carousel-wrapper">
        <div
            v-for="(slide, index) in slides"
            :key="index"
            class="carousel-slide"
            :class="{
            active: index === activeIndex,
            prev: index === (activeIndex - 1 + slides.length) % slides.length,
            next: index === (activeIndex + 1) % slides.length
          }"
        >
          <img :src="slide" alt="Slide image" />
        </div>
      </div>
      <div class="carousel-dots">
        <span
            v-for="(slide, index) in slides"
            :key="index"
            :class="{ active: index === activeIndex }"
            @click="goToSlide(index)"
        ></span>
      </div>
      <button @click="prevSlide" class="prev-button">❮</button>
      <button @click="nextSlide" class="next-button">❯</button>
      </div>
<!--    通知公告-->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;font-size: 16px;"> 通知 公告</span>
        </div>
        <div>
          <NewsCarousel :newsItems="newsList" />
        </div>
      </el-card>
    <el-card class="box-card-EChart">
        <RevenueHome />
    </el-card>
  </div>


</template>

<script>
import NewsCarousel from "@/views/home/NewsCarousel.vue";
import RevenueHome from "@/views/statistics/Revenue-home.vue";

export default {
  components: {
    NewsCarousel,
    RevenueHome},

  data() {
    return {

      activeIndex: 0,
      // 轮播 banner 的路径数组
      slides: [],
      autoPlayInterval: null,
      //新闻集合
      newsList:[],
    };
  },
  mounted() {
    this.loadBanner()
    this.startAutoPlay();
  },
  beforeDestroy() {
    this.pauseAutoPlay();
  },
  created() {
    this.loadNews()
    //查询按钮权限
    this.$http.get("/menu/getButtons").then(res=>{
      localStorage.setItem(
          "userButtonPermissions",
          res.data.data
      );
    })
  },
  methods: {
    // 加载新闻
    loadNews(){
      this.$http.get("/news/loadNews").then(resp=>{
       // console.log(resp.data.data)
        this.newsList =resp.data.data;
      })
    },

    // 加载 轮播图片
    loadBanner(){
      this.$http.get("/hosBanner/loadBanner").then(resp=>{
        this.slides=resp.data.data.map(item=>item.url)
      })
    },
    startAutoPlay() {
      this.autoPlayInterval = setInterval(this.nextSlide, 3000); // 每3秒切换一次
    },
    pauseAutoPlay() {
      clearInterval(this.autoPlayInterval);
      this.autoPlayInterval = null;
    },
    nextSlide() {
      this.activeIndex = (this.activeIndex + 1) % this.slides.length;
    },
    prevSlide() {
      this.activeIndex =
          (this.activeIndex - 1 + this.slides.length) % this.slides.length;
    },
    goToSlide(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 16px;
}

.item {
  margin: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.clearfix span{
  padding: 3px 10px;
}
.box-card {
  float: left;
  margin: 10px;
  height: 290px;
  width: 390px;
}
.box-card-EChart {
  margin: 10px;
  float: left;
  width: 755px;
}

.carousel {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 70%; /* 中间图片宽度更大 */
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  transform: translateX(-50%) scale(0.85); /* 默认情况下稍微缩小 */
  z-index: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-slide.active {
  opacity: 1;
  transform: translateX(-50%) scale(1.1); /* 中间图片放大 */
  z-index: 3;
}

.carousel-slide.prev {
  transform: translateX(-130%) scale(0.75); /* 左侧图片更小且向右偏移更多 */
  z-index: 2;
  opacity: 0.6; /* 透明度更低 */
}

.carousel-slide.next {
  transform: translateX(30%) scale(0.75); /* 右侧图片更小且向左偏移更多 */
  z-index: 2;
  opacity: 0.6; /* 透明度更低 */
}

.carousel-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-dots span.active {
  background-color: rgba(255, 255, 255, 1);
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.carousel-caption {
  padding: 0 !important;
}
</style>
